<!--  -->
<template>
  <div>
    <div class="todo-footer"
         v-if="total">
      <label>
        <input type="checkbox"
               v-model="isChecked"
               @click="isCheckedEvent" />
      </label>
      <span>
        <span>已完成{{getDoneNum}}</span> / 全部{{total}}
      </span>
      <button class="btn btn-danger"
              @click="clearAll">清除已完成任务</button>
    </div>

  </div>
</template>

<script>
export default {
  data () {
    return {
      bool: false
    }
  },
  props: ['hobbyList'],
  computed: {
    // 1.计算全部条数
    total () {
      return this.hobbyList.length
    },
    // 2.计算已完成的条数
    getDoneNum () {
      const num = this.hobbyList.reduce((pre, item) => {
        // console.log(pre, item);
        return pre + (item.done == true ? 1 : 0);
      }, 0)
      return num
    },
    // 3.计算是否勾选或不勾选多选框
    isChecked: {
      get () {
        if (this.total == this.getDoneNum && this.total > 0) {
          return this.bool = true
        } else {
          return this.bool = false
        }
      },
      set (value) {
        this.$emit("checkOrNot", value)
      }
    }
  },
  methods: {
    isCheckedEvent () {
      this.$emit("checkOrNot", this.bool)
    },
    clearAll () {
      let bool = confirm("确定删除选中项吗？")
      if (bool) {
        this.$emit("clearHasDone")
      }
    }
  },
  //生命周期 - 创建完成（访问当前this实例）
  created () {

  },
  //生命周期 - 挂载完成（访问DOM元素）
  mounted () {

  }
}

</script>
<style scoped>
/*footer*/
.todo-footer {
  height: 40px;
  line-height: 40px;
  padding-left: 6px;
  margin-top: 5px;
}

.todo-footer label {
  display: inline-block;
  margin-right: 20px;
  cursor: pointer;
}

.todo-footer label input {
  position: relative;
  top: -1px;
  vertical-align: middle;
  margin-right: 5px;
}

.todo-footer button {
  float: right;
  margin-top: 5px;
}
</style>